<template>
	<view v-for="(service, index) in props.serviceList" :key="index" class="service-item">
		<view class="service-item__inner">
			<!-- 左侧图标 -->
			<view class="service-icon">
				<text class="iconfont" :class="service.icon"></text>
			</view>

			<!-- 右侧内容 -->
			<view class="service-content" @click="navigationUrl(service)">
				<view class="service-header">
					<text class="service-title">{{ service.title }}</text>
					<!-- <wd-button size="small" @click="navigationUrl(service)">查看详情</wd-button> -->
					<wd-icon name="arrow-right" size="20px" color="#666"> </wd-icon>
				</view>
				<view class="service-desc">{{ service.desc }}</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';
	const fontSizeStore = useFontSizeStore();
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		defineProps
	} from "vue"
	
	// 路由实例 - 保留原逻辑
	const router = useRouter();
	const props = defineProps(["serviceList"])
	
	const navigationUrl = (item) => {
		router.push({
			name: item.pageName,
			params: {
				id: item.id,
				name:item.name,
				title:item.title
			}
		})
	}
	
</script>
<style scoped lang="less">
	@import '@/static/styles/colors.less';
	@import '@/static/styles/constants.less';

	// 服务项
	.service-item {
		margin-bottom: 30rpx;

		&:last-child {
			margin-bottom: 0; // 最后一项移除底部间距
		}

		&__inner {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			align-items: center;
		}
	}

	// 服务图标
	.service-icon {
		width: 80rpx; // 统一使用rpx单位
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e6f7ff;
		border-radius: 50%;
		margin-right: 24rpx;

		.iconfont {
			font-size: @icon-size-lg;
			color: #007AFF;
		}
	}

	// 服务内容区域
	.service-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-bottom: 1px solid @color-border;
		padding-bottom: 20rpx; // 适当增大底部内边距

		// 服务项头部（标题+按钮）
		.service-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 8rpx;
		}

		// 服务标题
		.service-title {
			font-size: @h4-size; // 统一使用rpx单位
			font-weight: 500;
			color: #333;
		}

		// 服务描述
		.service-desc {
			font-size: @h5-size;
			color: #666;
			line-height: 1.4; // 增加行高提升可读性
		}
	}
</style>